<template>
  <div>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
          v-model="mingzi"
          @keydown.enter="luru"
        />
      </section>
    </header>
    <section>
      <h2>
        正在进行 <span id="todocount"> {{ getArrcheck }}</span>
      </h2>
      <ol id="todolist" class="demo-box">
        <li
          v-for="(i, item) in arr"
          :key="item"
          v-if="i.check == false"
          @dblclick="xiugai(i, item)"
        >
          <span><input type="checkbox" v-model="i.check" /></span>
          <input
            type="text"
            v-if="i.gai"
            v-model="zhi"
            @keydown.enter="xin(i)"
          />
          <!-- 需要用个v-model 来接这个i.check的布尔值 -->
          <span v-if="i.gai == false">{{ i.name }}</span>
          <span @click="danshan(item)">删除</span>
        </li>
      </ol>
      <h2>
        已经完成 <span id="donecount">{{ getArrnocheck }}</span>
      </h2>
      <ul id="donelist">
        <li
          v-for="(i, item) in arr"
          :key="item"
          v-if="i.check == true"
          @dblclick="xiugai(i, item)"
        >
          <span><input type="checkbox" v-model="i.check" /></span>
          <input
            type="text"
            v-if="i.gai"
            v-model="zhi"
            @keydown.enter="xin(i)"
          />
          <!-- 需要用个v-model 来接这个i.check的布尔值 -->
          <span v-if="i.gai == false">{{ i.name }}</span>
          <span @click="danshan(item)">删除</span>
        </li>
      </ul>
    </section>
    <footer></footer>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}
li {
  position: relative;
}
ul,
li {
  list-style: none;
}
li {
  width: 300px;
  border: 1px solid #000;
  height: 20px;
}
b {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
<script>
export default {
  data() {
    return {
      arr: [],
      check: false,
      name: "",
      mingzi: "",
      zhi: "",
    };
  },
  methods: {
    luru() {
      if (this.mingzi.length > 0) {
        console.log("in");
        this.arr.push({ name: this.mingzi, check: false, gai: false });
        this.mingzi = "";
      }
    },
    danshan(item) {
      this.arr.splice(item, 1);
    },
    xiugai(i) {
      i.gai = true;
    },
    xin(i) {
      i.name = this.zhi;
      i.gai = false;
      this.zhi = "";
    },
  },
  computed: {
    getArrcheck() {
      var n = 0; //为社么会自动减去
      this.arr.forEach((item) => {
        if (item.check == false) {
          n++;
        }
      });
      return n;
    },
    getArrnocheck() {
      var n = 0;
      this.arr.forEach((item) => {
        if (item.check == true) {
          n++;
        }
      });
      return n;
    },
  },
};
</script>
